<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <title>数据可视化</title>

    <!-- Bootstrap Core and vandor -->
    <link rel="stylesheet" th:href="@{https://www.jq22.com/jquery/bootstrap-4.2.1.css}">
    <link rel="stylesheet" th:src="@{../asset/css/dropify.min.css}">

    <!-- Core css -->
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}"/>
</head>

<body class="font-muli theme-cyan gradient">

<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
    </div>
</div>

<div id="main_content">
    <!-- Start Main top header -->
    <div id="header_top" class="header_top">
        <div class="container">
            <div class="hleft">
                <a class="header-brand" th:href="@{/}"><i class="fa fa-graduation-cap brand-logo"></i></a>
            </div>
            <div class="hright">
                <a th:href="@{/}" class="nav-link icon settingbar"><i class="fe fe-power"></i></a>
            </div>
        </div>
    </div>
    <!-- Start Theme panel do not add in project -->
    <!-- Start Quick menu with more functio -->
    <!-- Start Main leftbar navigation -->
    <div id="left-sidebar" class="sidebar">
        <h5 class="brand-name">能控首页<a href="javascript:void(0)" class="menu_option float-right"><i class="icon-grid font-16" data-toggle="tooltip" data-placement="left" title="Grid & List Toggle"></i></a></h5>
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu-uni">水务系统</a></li>
        </ul>
        <div class="tab-content mt-3">
            <div class="tab-pane fade show active" id="menu-uni" role="tabpanel">
                <nav class="sidebar-nav">
                    <ul class="metismenu">
                        <li><a th:href="@{/basisposition/selectAll}"><i class="fa fa-black-tie"></i><span>楼栋管理</span></a></li>
                        <li><a th:href="@{/customer/imgIndex}"><i class="fa fa-user-circle-o"></i><span>数据可视化</span></a></li>
                        <li><a th:href="@{/customer/customerList}"><i class="fa fa-users"></i><span>所有用户信息</span></a></li>
                        <li><a href="javascript:void(0)"><i class="fa fa-users"></i><span class="meter">硬件设置</span></a>
                            <ul class="meterList">
                                <li>
                                    <a th:href="@{/meter/index}">新建硬件</a>
                                </li>
                                <li>
                                    <a th:href="@{/meter/meterView}">表具信息</a>
                                </li>
                            </ul>
                        </li>
                        <li><a th:href="@{/basisposition/select}"><i class="fa fa-graduation-cap"></i><span>账单记录</span></a></li>
                        <li><a th:href="@{/customer/customerInfo}"><i class="fa fa-book"></i><span>个人用户信息</span></a></li>
                        <li><a th:href="@{/infoView}"><i class="fa fa-bullhorn"></i><span>介绍页面</span></a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- Start project content area -->
    <div class="page">
        <!-- Start Page header -->
        <div class="section-body" id="page_top" >
            <div class="container-fluid">
            </div>
        </div>
        <!-- Start Page title and tab -->
        <div class="section-body">
            <div class="container-fluid">
                <div class="d-flex justify-content-between align-items-center ">
                    <div class="header-action">
                        <h1 class="page-title">数据可视化</h1>
                        <ol class="breadcrumb page-breadcrumb">
                            <li class="breadcrumb-item active" aria-current="page">图表展示</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="Transport-add">
            <div class="card">
                <!--增加用户-->
                <form class="card-body form-horizontal" method="post">
                    <div class="form-group row">
                        <label class="col-md-3 col-form-label">选择小区<span class="text-danger">*</span></label>
                        <div class="col-md-7">
                            <span  οnchange="A()" id="SS">
                                    <select name="positionname" onchange="get()" id="changeName" class="changeName">
                                        <span th:each="temp,Basisposition:${basispositions}">
                                            <option th:text="${temp.positionname}" id="positionname">
                                            </option>
                                        </span>
                                    </select>
                                </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        </div>
    <div style="width: 600px;height:400px; margin-left: 300px" id="main" ></div>
    <div style="width: 600px;height:400px; margin-left: 300px" id="day" ></div>
    <div style="width: 600px;height:400px; margin-left: 900px;margin-top: -800px;" id="money" ></div>
    </div>
</body>
<script th:src="@{/assets/js/lib.vendor.bundle.js}"></script>
<script th:src="@{/assets/js/echarts.js}"></script>
<script>

    var name = '';
    function get() {
        name = $("#changeName").find("option:selected").text();
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var app = {};
        option = null;
        option = {
            title:{
                text: name + '年用水量'
            },
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2018', '2019', '2020'],
                source: [
                    {product: '用水量', '2018': 43.3, '2019': 85.8, '2020': 93.7},
                    {product: '用水量', '2018': 83.1, '2019': 73.4, '2020': 55.1},
                    {product: '用水量', '2018': 86.4, '2019': 65.2, '2020': 82.5},
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        name = $("#changeName").find("option:selected").text();
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        var app = {};
        option = null;
        option = {
            title:{
                text: name + '年用水量'
            },
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2018', '2019', '2020'],
                source: [
                    {product: '用水量', '2018': Math.random() * 100, '2019': Math.random() *100, '2020': Math.random() * 100 },
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
    name = $("#changeName").find("option:selected").text();
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var app = {};
    option = null;
    option = {
        title:{
            text: name + '年用水量'
        },
        legend: {},
        tooltip: {},
        dataset: {
            dimensions: [],
            source: [
            ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'}
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

</script>
<script>
    var month =[1, 1, 1, 1, 1290, 1, 1320,932, 1, 934, 1290, 1330, 1320,932, 901, 934, 1290, 1330, 1320];
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('day'));

    var app = {};
    option = null;
    option = {
        title:{
           text:'每日用水量'
        },
        xAxis: {
            type: 'category',
            data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17',
            '18','19','20','21','22','23','24','25','26','27','28','29','30','31']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: month,
            type: 'line'
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<script>

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('money'));

    var app = {};
    option = null;
    option = {
        title: {
            text: '小区年总用水量',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['团结新村', '明怡花苑', '海上明月']
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: 335, name: '团结新村'},
                    {value: 310, name: '明怡花苑'},
                    {value: 234, name: '海上明月'},
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
    // $("canvas").css("margin-left","290px");

<!-- Start Main project js, jQuery, Bootstrap -->

<!-- Start Plugin Js -->

<!-- Start project main js  and page js -->
<script src="/assets/js/core.js"></script>
<script src="/assets/js/dropify.js"></script>
<script src="/assets/js/dialogs.js"></script>
</body>
</html>
